<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            /* 100% viewport视口宽度,也就是全屏宽 */
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi expedita labore natus nobis
            officiis optio recusandae saepe sint temporibus. Adipisci autem iste minus pariatur perspiciatis quod
            repellendus sint sunt!
        </div>
        <div>Consequatur culpa dolorem enim ex excepturi illum natus, odio quisquam rerum tenetur. Architecto, velit
            voluptatum. Cumque eveniet nobis sapiente temporibus ut! Dolor eveniet labore odio optio porro vel vero
            voluptas.
        </div>
        <div>Animi commodi consectetur consequuntur cum expedita id impedit inventore ipsa laborum maxime obcaecati odit
            officiis quae, quidem ratione reiciendis repellendus sed tenetur totam unde. Animi asperiores aut explicabo
            molestiae recusandae.
        </div>
        <div>Ad delectus perferendis quibusdam recusandae repellat repellendus, similique totam voluptate. Assumenda ea
            enim eum minima numquam omnis quod rem! A beatae distinctio facere magni nam nesciunt praesentium qui unde
            voluptatibus?
        </div>
        <div>Aliquam aliquid aut doloremque nobis sapiente similique. Atque error est explicabo minus pariatur repellat
            saepe totam. Ad, animi, aperiam asperiores commodi cupiditate, distinctio doloremque fuga laborum maiores
            ratione repudiandae tempore?
        </div>
        <div>Alias aspernatur at, dolore dolorem ducimus eos hic id ipsa iste, labore laudantium omnis porro tenetur?
            Deleniti dolor eligendi eveniet ex fugit iste modi officia perferendis, placeat porro rem repellendus.
        </div>
        <div>Accusamus assumenda dicta doloremque eum ex iusto laboriosam, magni obcaecati odio optio quae, quaerat
            quasi, quis quisquam rerum saepe ullam velit voluptatibus. Cupiditate explicabo hic laboriosam
            necessitatibus perferendis porro voluptatem.
        </div>
        <div>Consequatur deserunt dignissimos libero nobis nulla perferendis provident quisquam, temporibus voluptas.
            Aut deserunt dicta enim esse eum expedita facilis in itaque laboriosam nisi nobis porro quae quis velit,
            voluptas, voluptates.
        </div>
        <div>Ad alias consequuntur impedit ipsam magni nam, nemo reiciendis sequi, similique suscipit unde velit? A
            corporis fugit inventore, optio repudiandae saepe veritatis? Accusamus deleniti facilis ipsum molestiae
            nobis, tempora ullam.
        </div>
        <div>Architecto consectetur dicta dolorem doloribus ipsum natus non, obcaecati optio, perferendis perspiciatis
            quam quas, quo rerum! Accusantium adipisci animi autem doloribus ipsam iusto pariatur ratione veritatis
            voluptatem! Et, optio, quae.
        </div>
        <div>Ab cupiditate eaque odit optio possimus quis repellat sed, veniam voluptatibus. Aliquid architecto commodi
            doloribus ducimus eum, ipsam iste, iusto perferendis quaerat quidem quo quod sapiente sit soluta sunt unde!
        </div>
        <div>Accusamus aliquam cumque debitis, doloremque error eum excepturi id in ipsum magnam maiores minima modi
            nisi nobis possimus quasi quisquam quos ratione recusandae, repellat sint soluta ullam unde veniam
            voluptates.
        </div>
        <div>Asperiores commodi ipsum nulla provident, quas quibusdam! Accusamus aliquid amet animi cupiditate eaque
            eligendi, eos eveniet fuga illum molestias natus nemo odio omnis perspiciatis qui saepe sapiente soluta
            velit, voluptatibus!
        </div>
        <div>Animi atque culpa ipsum quae quis sapiente sed sequi, soluta vel veniam. A aperiam aut dolore veritatis! At
            atque delectus, est eum libero nulla rem ut veniam? Architecto, id sequi.
        </div>
        <div>Ad aut beatae corporis dignissimos, eveniet saepe tempore. Alias animi aperiam, beatae dignissimos est
            explicabo fugit illum incidunt ipsa laboriosam minus non perferendis porro provident quam quidem ratione
            voluptates voluptatum!
        </div>
        <div>Aut culpa hic, itaque iure laudantium quam tempore temporibus? Asperiores aut cum ea eum eveniet excepturi
            fugit inventore ipsam iste minima modi nesciunt nihil nobis, odit provident quidem rerum voluptates!
        </div>
        <div>Aspernatur atque eos eum excepturi, fugiat, inventore laborum nesciunt numquam obcaecati odio quae totam ut
            veritatis voluptas voluptatum. Alias aperiam ea eligendi et eum eveniet fugiat nemo quos repellendus vero!
        </div>
        <div>Accusamus ducimus earum error facere incidunt, itaque laborum modi natus necessitatibus nulla officiis quos
            repudiandae sed sint tenetur ut veniam? Accusantium autem fugit, hic molestiae perspiciatis possimus qui
            repellat voluptate.
        </div>
        <div>Delectus, fuga, qui. Accusamus adipisci aspernatur autem distinctio illum, libero ullam. Distinctio,
            doloribus eius illum, molestias nemo nulla odio optio perspiciatis porro quaerat reprehenderit similique
            tenetur totam! Et magnam, repellendus.
        </div>
        <div>Deserunt distinctio esse et eveniet minima pariatur ratione repellat voluptas. Aliquid asperiores at beatae
            cumque delectus dolor esse, et eum exercitationem laboriosam laborum nulla odio quae quam ratione
            reiciendis, voluptatem.
        </div>
        <div>Animi exercitationem id laboriosam provident quasi qui quibusdam rem saepe tempore, voluptate? Beatae
            debitis delectus dolor dolorum eos harum molestias officia quia. Ad excepturi facere nisi quisquam
            repudiandae. Debitis, quisquam.
        </div>
        <div>Adipisci, alias aliquam architecto atque beatae corporis cupiditate dolor earum eos error facere fuga,
            fugit illo in labore minus molestias neque odit placeat sed suscipit ut velit veritatis vitae voluptates?
        </div>
        <div>Fugiat itaque porro quisquam quo? Consectetur quaerat reiciendis, repellat sequi temporibus voluptatibus!
            Aliquid aspernatur deserunt fugiat harum incidunt nam nesciunt, non optio pariatur possimus provident,
            quidem sequi similique unde, voluptas!
        </div>
        <div>Aut cupiditate eveniet ex facilis in, itaque, iusto magnam nesciunt odit officia quo quod quos rerum
            temporibus velit voluptatem voluptatibus. Asperiores, dignissimos, velit! Aliquid delectus dolores et in,
            soluta temporibus.
        </div>
        <div>Ab ad aliquam animi aperiam asperiores at blanditiis commodi consectetur consequatur cum deleniti
            dignissimos dolor hic, illo laudantium neque perferendis porro quae quaerat quidem ratione saepe sit soluta
            tempore veritatis.
        </div>
        <div>Alias commodi, cum cumque delectus illo impedit incidunt ipsum maiores odit, officia placeat provident
            quaerat quibusdam quidem quos tenetur velit, veniam vero voluptate voluptatem! Aut corporis earum eius ullam
            voluptates.
        </div>
        <div>Commodi, consequatur dolor dolorem earum eum hic illo ipsum labore optio placeat provident quis, repellat
            sequi sunt, voluptate! At delectus dicta facere, incidunt maiores quod recusandae rerum sequi sunt velit?
        </div>
        <div>Aliquid beatae consequuntur cumque dolores enim est ex mollitia necessitatibus neque, nisi nobis nostrum
            obcaecati odio officia pariatur possimus quidem recusandae rem sunt unde veniam vitae voluptate. Nobis,
            obcaecati, quos!
        </div>
        <div>Animi assumenda atque consectetur dolorum ea eaque fugiat ipsa, ipsam maiores maxime minima molestiae
            molestias nam neque nulla odit officia quae repellat repellendus sapiente sint totam ut vitae voluptatem
            voluptatibus.
        </div>
        <div>Aperiam consequuntur dolor expedita illo labore laboriosam nulla omnis qui similique velit! Ad animi at
            commodi cum ducimus, eaque ex excepturi ipsa laboriosam minima mollitia nam, perferendis repellendus, sed
            voluptatibus?
        </div>
        <div>Aliquam amet dolor doloremque esse inventore laboriosam laudantium maxime non numquam, possimus quisquam
            reprehenderit sequi temporibus totam unde vero, voluptatibus? Alias consequatur ducimus enim ex harum minima
            quaerat quisquam reprehenderit.
        </div>
        <div>Aperiam eligendi fuga impedit? Alias assumenda consequuntur cum doloremque eius, hic id magni mollitia
            nesciunt numquam odit officia perspiciatis quas quasi, reprehenderit sed sint tempore tenetur ullam
            voluptatum. Dolore, repellendus!
        </div>
        <div>Dolores, perferendis, sint! Asperiores dolores facilis laudantium quisquam! Alias aperiam blanditiis
            consequuntur debitis dolorem ea hic impedit iusto maxime molestias, mollitia nisi nulla quidem repellendus,
            sint soluta temporibus? Architecto, sequi.
        </div>
        <div>Accusamus adipisci ducimus eos minus mollitia necessitatibus non perspiciatis rerum vitae. Consectetur
            delectus dignissimos, distinctio eius ex in inventore minus quasi qui quidem quod quos sapiente suscipit
            tempora tempore temporibus!
        </div>
        <div>Animi deleniti expedita fugiat hic iste nam pariatur, quisquam ratione sequi suscipit ullam voluptatibus.
            Aliquam deleniti dicta dolorum facilis ipsa maxime nemo nulla odio, quis ratione repellendus rerum, totam
            vitae.
        </div>
        <div>Consequuntur excepturi hic in nemo quasi rerum! Distinctio dolor exercitationem harum minus nostrum quam
            quis. At enim facilis inventore maxime nam, nostrum, perferendis perspiciatis possimus praesentium, quasi
            sapiente sit ullam?
        </div>
        <div>A, ab accusamus accusantium ad adipisci asperiores aspernatur atque culpa eius eos et explicabo, fugit
            inventore ipsam itaque maxime minus nam nobis odit optio placeat provident ratione rerum ullam voluptas.
        </div>
        <div>Accusantium adipisci aliquam assumenda commodi consectetur corporis dolores doloribus eligendi, expedita
            hic illo labore minima necessitatibus neque nostrum officia pariatur quas quia quidem ratione reprehenderit
            tempore temporibus tenetur totam ullam.
        </div>
        <div>Ducimus impedit iste itaque molestiae, natus nesciunt non, perspiciatis quae qui recusandae sed ullam vitae
            voluptas? Aspernatur consectetur, cumque expedita, magnam odio officia pariatur quaerat reprehenderit sint
            velit, veniam voluptatem!
        </div>
        <div>Aliquam dolor magni minus rem tempore temporibus unde. A deleniti dignissimos facere labore mollitia nemo
            neque, nobis numquam perferendis praesentium reiciendis repellat rerum sit tenetur ut velit vero vitae
            voluptatibus.
        </div>
        <div>Aliquid aspernatur blanditiis dignissimos dolor eveniet natus necessitatibus sint suscipit unde vero!
            Commodi doloribus, eius fuga fugiat maiores sequi soluta totam vero vitae voluptatibus. Amet minima odio
            officia veritatis vero!
        </div>
        <div>Debitis dolores laboriosam laudantium maiores molestiae provident repellat soluta totam ut velit! Accusamus
            amet architecto, asperiores assumenda, ea eius ipsum laudantium nemo odio quas quasi qui recusandae sapiente
            temporibus voluptate?
        </div>
        <div>At atque consequatur enim eos fuga molestiae mollitia perspiciatis possimus quas repudiandae tempora
            tenetur unde, vel! Aperiam assumenda at commodi dolorum earum, enim explicabo ipsa iure omnis possimus sunt
            veniam!
        </div>
        <div>Maxime quibusdam quidem recusandae repellendus voluptas? Dolores fugit in inventore minus nisi officia,
            officiis pariatur, placeat porro possimus rerum soluta tempora tempore temporibus veritatis. Alias
            asperiores distinctio iusto nesciunt rerum?
        </div>
        <div>Atque blanditiis, consequatur dolores fugit ipsa iure magni obcaecati quod repudiandae voluptatum. Enim
            incidunt odit quis! Dicta earum harum ipsam ipsum molestias nostrum, numquam, quaerat repellat, sapiente
            sequi sint vel?
        </div>
        <div>Assumenda mollitia quis tenetur totam voluptate! Accusamus at culpa dolores enim, illum inventore nostrum.
            Aspernatur debitis laborum numquam porro recusandae. Aliquam cumque ea et, ex ipsa nam pariatur quos
            reiciendis.
        </div>
        <div>Architecto assumenda beatae consectetur, culpa doloribus eos error est excepturi expedita fuga fugit harum,
            molestias nihil nobis odit omnis quasi quisquam quo, ratione recusandae suscipit tempore temporibus totam
            ullam ut!
        </div>
        <div>Eaque est fugiat iusto molestiae nobis sunt. A accusamus accusantium alias, aspernatur blanditiis cum,
            cupiditate debitis, dignissimos dolor doloribus eveniet expedita iusto minus nisi obcaecati quasi quisquam
            tenetur velit voluptate.
        </div>
        <div>Alias, aliquid beatae dolore doloribus eius eos eum explicabo inventore iste iusto maiores minima nulla,
            odit perspiciatis possimus recusandae rem repudiandae rerum sint, ut velit veritatis voluptatem. Aliquid,
            fugiat, inventore?
        </div>
        <div>Distinctio doloremque omnis sapiente tempora voluptate. Consectetur consequatur dolores iure labore
            provident repudiandae similique temporibus! Ab harum illum sed soluta suscipit, tenetur ullam! Dolorem
            doloremque illum, maiores minima praesentium voluptatum.
        </div>
    </div>
</body>
</html>